<!DOCTYPE html>
<html lang="en">
<head>
    <title>test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>


    <!-- jQuery AND jQueryUI -->
    <script type="text/javascript" src="js/libs/jquery/1.6/jquery.min.js"></script>
    <script type="text/javascript" src="js/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>

    <!-- Compressed Version
    <link type="text/css" rel="stylesheet" href="min/b=CoreAdmin&f=css/reset.css,css/style.css,css/jqueryui/jqueryui.css,js/jwysiwyg/jquery.wysiwyg.old-school.css,js/zoombox/zoombox.css" />
    <script type="text/javascript" src="min/b=CoreAdmin/js&f=cookie/jquery.cookie.js,jwysiwyg/jquery.wysiwyg.js,tooltipsy.min.js,iphone-style-checkboxes.js,excanvas.js,zoombox/zoombox.js,visualize.jQuery.js,jquery.uniform.min.js,main.js"></script>
    -->
    <link rel="stylesheet" href="css/min.css"/>
    <script type="text/javascript" src="js/min.js"></script>
    <!-- 引入 echarts.js -->
    <script src="js/echarts.min.js"></script>


</head>
<body>
    <form action="UserServlet" method="post">
        电话：<input type="text" name="telephone" placeholder="请输入电话号码" required="required"><br>
        年份：<input type="text" name="year" placeholder="请输入年份" required="required"><br>
        月份：<input type="text" name="month" placeholder="若只想查月份则输入0" required="required"><br>
                <input type="submit" value="查询">
    </form>
<br><br>
    <!--画图1-->
    <div id="content" class="white">
        <div id="echarts">
            <div class="cb">
                <div id="main" style="width: 100%;height:400px;"></div>
                <script type="text/javascript">
                    // 基于准备好的dom，初始化echarts实例
                    var myChart = echarts.init(document.getElementById('main'));
                    myChart.showLoading();  // 开启 loading 效果
                    // 显示标题，图例和空的坐标轴

                    option = {
                        title:{
                            text:'根据电话和年份月份查看当月每日通话次数',
                        },
                        toolbox: {
                            feature:{
                                magicType: {
                                    type: ['line', 'bar']
                                }
                            }
                        },
                        xAxis: {
                            type: 'category',
                            data: [],
                        },
                        yAxis: {
                            show: true,
                            axisLine: {show:true},
                            type: 'value'
                        },
                        series: [{
                            type: 'bar',
                            showBackground: true,
                            backgroundStyle: {
                                color: 'rgba(220, 220, 220, 0.8)'
                            }
                        }]
                    };

                    $(function (){
                        $.get("CallNumberServlet",{},function (data){
                            myChart.hideLoading();  // 隐藏 loading 效果
                            var call_sum = [];
                            var day = [];
                            //加载数据
                            $(data).each(function () {
                                call_sum.push(this.call_sum);
                                day.push(this.day);
                            });
                            myChart.setOption({
                                xAxis: {
                                    data: day
                                },
                                series: [{

                                    data:call_sum
                                }]
                            });
                        })
                    });

                    myChart.setOption(option);
                </script>
            </div>
        </div>
    </div>
<br><br>
    <!--画图2-->
    <div id="content2" class="white">
        <div id="echarts2">
            <div class="cb">
                <div id="main2" style="width: 100%;height:400px;"></div>
                <script type="text/javascript">
                    // 基于准备好的dom，初始化echarts实例
                    var myChart2 = echarts.init(document.getElementById('main2'));
                    myChart2.showLoading();  // 开启 loading 效果
                    // 显示标题，图例和空的坐标轴

                    option = {
                        title:{
                            text:'根据电话和年份月份查看当月每天的通话时长',
                        },
                        toolbox: {
                            feature:{
                                magicType: {
                                    type: ['line', 'bar']
                                }
                            }
                        },
                        xAxis: {
                            type: 'category',
                            data: []
                        },
                        yAxis: {
                            show: true,
                            axisLine: {show:true},
                            type: 'value'
                        },
                        series: [{
                            type: 'bar',
                            showBackground: true,
                            backgroundStyle: {
                                color: 'rgba(220, 220, 220, 0.8)'
                            }
                        }]
                    };

                    $(function (){
                        $.get("CallTimeServlet",{},function (data){
                            myChart2.hideLoading();  // 隐藏 loading 效果
                            var call_duration_sum = [];
                            var day = [];
                            //加载数据
                            $(data).each(function () {
                                call_duration_sum.push(this.call_duration_sum);
                                day.push(this.day);
                            });
                            myChart2.setOption({
                                xAxis: {
                                    data: day
                                },
                                series: [{

                                    data:call_duration_sum
                                }]
                            });
                        })
                    });

                    myChart2.setOption(option);
                </script>
            </div>
        </div>
    </div>
<br><br>
    <!--画图3-->
    <div id="content3" class="white">
        <div id="echarts3">
            <div class="cb">
                <div id="main3" style="width: 100%;height:400px;"></div>
                <script type="text/javascript">
                    // 基于准备好的dom，初始化echarts实例
                    var myChart3 = echarts.init(document.getElementById('main3'));
                    myChart3.showLoading();  // 开启 loading 效果
                    // 显示标题，图例和空的坐标轴

                    option = {
                        title:{
                            text:'根据电话和年份查看当年每月的次数',
                        },
                        toolbox: {
                            feature:{
                                magicType: {
                                    type: ['line', 'bar']
                                }
                            }
                        },
                        xAxis: {
                            type: 'category',
                            data: []
                        },
                        yAxis: {
                            show: true,
                            axisLine: {show:true},
                            type: 'value'
                        },
                        series: [{
                            type: 'bar',
                            showBackground: true,
                            backgroundStyle: {
                                color: 'rgba(220, 220, 220, 0.8)'
                            }
                        }]
                    };

                    $(function (){
                        $.get("MonthCallNumberServlet",{},function (data){
                            myChart3.hideLoading();  // 隐藏 loading 效果
                            var count = [];
                            var month = [];
                            //加载数据
                            $(data).each(function () {
                                count.push(this.count);
                                month.push(this.month);
                            });
                            myChart3.setOption({
                                xAxis: {
                                    data: month
                                },
                                series: [{

                                    data:count
                                }]
                            });
                        })
                    });

                    myChart3.setOption(option);
                </script>
            </div>
        </div>
    </div>
<br><br>
    <!--画图4-->
    <div id="content4" class="white">
        <div id="echarts4">
            <div class="cb">
                <div id="main4" style="width: 100%;height:400px;"></div>
                <script type="text/javascript">
                    // 基于准备好的dom，初始化echarts实例
                    var myChart4 = echarts.init(document.getElementById('main4'));
                    myChart4.showLoading();  // 开启 loading 效果
                    // 显示标题，图例和空的坐标轴

                    option = {
                        title:{
                            text:'根据电话和年份查看当年每月的通话时长',
                        },
                        toolbox: {
                            feature:{
                                magicType: {
                                    type: ['line', 'bar']
                                }
                            }
                        },
                        xAxis: {
                            type: 'category',
                            data: []
                        },
                        yAxis: {
                            show: true,
                            axisLine: {show:true},
                            type: 'value'
                        },
                        series: [{
                            type: 'bar',
                            showBackground: true,
                            backgroundStyle: {
                                color: 'rgba(220, 220, 220, 0.8)'
                            }
                        }]
                    };

                    $(function (){
                        $.get("MonthCallTimeServlet",{},function (data){
                            myChart4.hideLoading();  // 隐藏 loading 效果
                            var sum = [];
                            var month = [];
                            //加载数据
                            $(data).each(function () {
                                sum.push(this.sum);
                                month.push(this.month);
                            });
                            myChart4.setOption({
                                xAxis: {
                                    data: month
                                },
                                series: [{

                                    data:sum
                                }]
                            });
                        })
                    });

                    myChart4.setOption(option);
                </script>
            </div>
        </div>
    </div>
<br><br>
    <!--画图5-->
    <div id="content5" class="white">
        <div id="echarts5">
            <div class="cb">
                <div id="main5" style="width: 100%;height:400px;"></div>
                <script type="text/javascript">
                    // 基于准备好的dom，初始化echarts实例
                    var myChart5 = echarts.init(document.getElementById('main5'));
                    myChart5.showLoading();  // 开启 loading 效果
                    // 显示标题，图例和空的坐标轴

                    option = {
                        title:{
                            text:'根据电话查看喜爱度',
                        },
                        toolbox: {
                            feature:{
                                magicType: {
                                    type: ['line', 'bar']
                                }
                            }
                        },
                        xAxis: {
                            type: 'category',
                            data: []
                        },
                        yAxis: {
                            show: true,
                            axisLine: {show:true},
                            type: 'value'
                        },
                        series: [{
                            type: 'bar',
                            showBackground: true,
                            backgroundStyle: {
                                color: 'rgba(220, 220, 220, 0.8)'
                            }
                        }]
                    };

                    $(function (){
                        $.get("LoverServlet",{},function (data){
                            myChart5.hideLoading();  // 隐藏 loading 效果
                            var name = [];
                            var loverCount = [];
                            //加载数据
                            $(data).each(function () {
                                name.push(this.name);
                                loverCount.push(this.loverCount);
                            });
                            myChart5.setOption({
                                xAxis: {
                                    data: name
                                },
                                series: [{

                                    data:loverCount
                                }]
                            });
                        })
                    });

                    myChart5.setOption(option);
                </script>
            </div>
        </div>
    </div>
</body>
</html>